<script setup>
import ScrollPagination from '../components/ScrollPagination.vue'
//聊天列表
import {ref} from "vue";

const chatList = ref([{
  date:  '昨天',
  chatList: [
    {
      title:"VUE依赖冲突问题",
      id:1
    },
    {
      title:"筛选NUmber不为空数据",
      id:2
    },
    {
      title:"ElUpload上传问题",
      id:3
    }
  ]
},{
  date:  '四月',
  chatList: [
    {
      title:"分包商数据处理",
      id:1
    },
    {
      title:"签名组件与实现签名组件与实现签名组件与实现",
      id:2
    },
    {
      title:"乱码修复与翻译",
      id:3
    }
  ]
}])

const loading = ref(false)
const finished = ref(false)
let page = ref(1)
const loadMore = async () => {

  if (loading.value || finished.value) return
  loading.value = true
  const res = await fetchData(page.value++)  // 模拟接口
  chatList.value.push(...res.data)
  if (res.finished) {
    finished.value = true
  }
  loading.value = false
}
// 模拟接口
const fetchData = async (page) => {
  await new Promise(r => setTimeout(r, 1000))
  const hasMore = page < 5
  const data = Array.from({ length: 10 }, (_, i) => ({
    date: `2025-${page}-${i}`,
    chatList: new Array(10).fill(0).map((_, i) => ({
      title: getRandomChinese(Math.floor(Math.random() * 10) + 9),
      id: i
    }))
  }))
  return { data, finished: !hasMore }
}
//生成随机中文字符串
function getRandomChinese(length) {
  let result = '';
  for (let i = 0; i < length; i++) {
    const charCode = Math.floor(Math.random() * 0x4e00 + 0x4e00);
    result += String.fromCharCode(charCode);
  }
  return result;
}
</script>

<template>
  <ScrollPagination
      :loading="loading"
      :finished="finished"
      immediate
      fill-first-page
      @load="loadMore"
  >
    <ul class="menu-list">
      <li
          v-for="(item, index) in chatList"
          :key="index"
      >
        <span class="date" >{{ item.date }}</span>
        <div class="box-item">
          <div class="mItem" v-for="(ite,ind)  in item.chatList" :key="ind">
            <div class="text">
              {{ite.title}}
            </div>
            <DeleteFilled class="icon"/>
          </div>
        </div>
      </li>
    </ul>
  </ScrollPagination>

</template>

<style scoped lang="scss">
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list li {
  align-items: center;
  padding: 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  .date{
    font-size: 12px;
    padding-left: 16px;
  }
  .mItem{
    font-size: 14px;
    padding: 8px 16px;
    transition:  all 0.2s;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }
    .icon{
      display: none;
      opacity: 0;
      transition: all 0.3s;
      width: 16px;
      white-space: nowrap;
      min-width: 16px;
    }
    &:hover{
      .icon{
        display: block;
        opacity: 1;
        &:hover{
          color: red;
        }
      }
    }
    &:hover{
      background: #cad5e8;
    }
  }
}

</style>
